<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="./img/icon_huaji.ico">

  <title>任务列表</title>

  <link href="./css/bootstrap.css" rel="stylesheet">
  <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  <link href="dashboard.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/task_list.css">


  <script src="./js/ie-emulation-modes-warning.js"></script>

</head>

<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
          aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">公司logo</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">设置</a></li>
          <li><a href="#">简介</a></li>
          <li><a href="#">帮助</a></li>
          <li><a href="#">当前用户:Admin</a></li>
        </ul>
        <form class="navbar-form navbar-right">
          <input type="text" class="form-control" placeholder="Search...">
        </form>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
          <li class="active"><a href="#" class="creat_icon">任务列表 <span class="sr-only">(current)</span></a></li>
          <li><a href="./edit.html">编辑任务</a></li>
          <li><a href="./index.html">更改账户</a></li>
          <li><a href="./index.html">退出系统</a></li>
        </ul>


      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        <div class="row create_task" id="create">
          <div class="col-xs-4">
            <h3 class="sub-header">新建任务</h3>
            <form>
              <div class="form-group">
                <h3><span class="label label-success label_task_id"><label for="new_task_name">任务名称</label></span>
                </h3>
                <input type="text" class="form-control" id="new_task_name" placeholder="请输入任务名称">
              </div>
              <div class="form-group">
                <h3><span class="label label-success"><label for="choose_file">选择文件</label></span>
                </h3>

                <input type="file" id="choose_file" onchange="change()">
                <input type="text" class="form-control" id="input_file_path" disabled="disabled">
              </div>
              <button type="button" class="btn btn-warning" onclick="make_sure_create()">确认</button>
              <button type="submit" class="btn btn-warning btn_cancel">取消</button>
            </form>
          </div>

          <div class="col-xs-6">
            <div class="img_box" id="picture">
              <img src="./img/huaxueshi.png" alt="">
            </div>
          </div>

        </div>

        <h2 class="sub-header">任务列表<i class="iconfont icon-tianjia add_btn" onclick="show_create_part()"></i></h2>
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>ID</th>
                <th>任务名称</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>编辑任务</th>
                <th>删除任务</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>THEOPHYLLINE</td>
                <td><a href="./filter.html"><button type="button" class="btn-sm btn-success">已完成</button></a></td>
                <td>2019-04-17 15:00 </td>
                <td><a href="./edit.html"><button type="button" class="btn-sm btn-warning">编辑</button></a></td>
                <td><button type="button" class="btn-sm btn-danger" onclick="delete_tr(this)">删除</button></td>
              </tr>
              <tr>
                <td>2</td>
                <td>SULFADIAZINE</td>
                <td><a href="./filter.html"><button type="button" class="btn-sm btn-success">已完成</button></a></td>
                <td>2019-04-17 15:00 </td>
                <td><a href="./edit.html"><button type="button" class="btn-sm btn-warning">编辑</button></a></td>
                <td><button type="button" class="btn-sm btn-danger" onclick="delete_tr(this)">删除</button></td>
              </tr>
              <tr>
                <td>3</td>
                <td>EPERIDINE</td>
                <td><a href="./filter.html"><button type="button" class="btn-sm btn-success">已完成</button></a></td>
                <td>2019-04-17 15:00 </td>
                <td><a href="./edit.html"><button type="button" class="btn-sm btn-warning">编辑</button></a></td>
                <td><button type="button" class="btn-sm btn-danger" onclick="delete_tr(this)">删除</button></td>
              </tr>


            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <script>
    function show_create_part() {
      var create = document.getElementById("create");
      create.style.display = "block";
    }

    function get_date(){
      var d = new Date();
      var year,month,date,hour,minute;
      year = d.getFullYear();
      month = d.getMonth()+1;
      if (month<10) {
        month = '0' + month;
      }
      date = d.getDate();
      if (date<10) {
        date = '0' + date;
      }
      hour = d.getHours();
      if (hour<10) {
        hour = '0' + hour;
      }
      minute = d.getMinutes();
      if (minute<10) {
        minute = '0' + minute;
      }

      var str = year+'-'+month+'-'+date+' '+hour+':'+minute;

      return str;
    }
    get_date()

    function make_sure_create() {
      var tbody = document.getElementsByTagName("tbody")[0];
      var create = document.getElementById("create");
      var new_task_name = document.getElementById("new_task_name");
      if (new_task_name.value == '')  {
        alert('任务名不能为空!')
        return ;
      }
      var path = document.getElementById("input_file_path");
      var picture = document.getElementById("picture");
      create.style.display = "none";

      var len = tbody.childElementCount;
      var mod = `
                <tr>
                    <td>${ len + 1}</td>
                    <td>${new_task_name.value}</td>
                    <td><a href="./filter.html"><button type="button" class="btn-sm btn-success">已完成</button></a></td>
                    <td>${get_date()}</td>
                    <td><a href="./edit.html"><button type="button" class="btn-sm btn-warning">编辑</button></a></td>
                    <td><button type="button" class="btn-sm btn-danger" onclick="delete_tr(this)">删除</button></td>
                </tr>
            `
      tbody.innerHTML += mod;
      new_task_name.value = '';
      path.value = '';
      picture.style.opacity = "0";
    }

    function delete_tr(elem) {
      elem.parentElement.parentElement.remove();
      var tr_list = document.querySelectorAll('tr');
      for (let index = 1; index < tr_list.length; index++) {
        tr_list[index].children[0].innerText = index;

      }
    }

    function change() {
      var ipt_box = document.getElementById("choose_file");
      var path = document.getElementById("input_file_path");
      var picture = document.getElementById("picture");
      path.value = ipt_box.value;
      picture.style.opacity = "1";
    }

  </script>


  <script src="./js/jquery.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/holder.min.js"></script>
  <script src="./js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>